import { Button, FormInstance, Input, List, Pagination, Popover } from "antd";
import React, { useEffect, useMemo, useRef, useState } from "react";

type PopoverSelectProps = {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
};

const PopoverSelect: React.FC<PopoverSelectProps> = ({
  value = "",
  onChange,
  placeholder,
}) => {
  //   const searchRef = useRef<string>("");
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(3);
  const [searchValue, setSearchValue] = useState<string>("");
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [open, setOpen] = useState<boolean>(false);
  useEffect(() => {
    setDataSource([
      { name: "董事会" },
      { name: "市场部" },
      { name: "财务部" },
      { name: "技术部" },
      { name: "人力资源部" },
      { name: "行政部" },
      { name: "法务部" },
      { name: "审计部" },
    ]);
  }, []);

  const searchDataSource = useMemo(() => {
    return dataSource
      .filter((item) => item.name.includes(searchValue))
      .slice((currentPage - 1) * pageSize, currentPage * pageSize);
  }, [dataSource, searchValue, currentPage, pageSize]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value, "e.target.value");
    onChange?.(e.target.value); // 把值回传给 Form
  };

  //搜索
  const searchChangeHandle = (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(e, "e.target");
    if (e.key === "Enter") {
      setSearchValue(e.target.value);
      //   console.log("搜索");
    }
  };

  const handleSelect = (name: string) => {
    setSearchValue("");
    onChange?.(name);
    setOpen(false);
  };

  return (
    <Input
      value={value}
      onChange={handleInputChange}
      placeholder={placeholder}
      addonAfter={
        <Popover
          open={open}
          content={
            <List
              dataSource={searchDataSource}
              footer={
                <div className="flex justify-center">
                  <Pagination
                    align="center"
                    defaultCurrent={currentPage}
                    total={dataSource.length}
                    pageSize={pageSize}
                    onChange={(page, newPageSize: number) => {
                      setCurrentPage(page);
                      setPageSize(Number(newPageSize));
                    }}
                  />
                </div>
              }
              renderItem={(item) => (
                <List.Item
                  onClick={() => handleSelect(item.name)}
                  className="!pl-2 cursor-pointer hover:bg-blue-50"
                >
                  {item.name}
                </List.Item>
              )}
            />
          }
          title={
            <Input
              placeholder="请搜索输入"
              onPressEnter={searchChangeHandle}
              addonAfter={
                <span className="cursor-pointer hover:text-blue-500">搜索</span>
              }
            />
          }
          trigger="click"
        >
          <span onClick={() => setOpen(true)} className="cursor-pointer">
            +
          </span>
        </Popover>
      }
    />
  );
};

export default PopoverSelect;
